<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <el-button icon="el-icon-arrow-left" @click="back">
           {{$t('common.back')}}
          </el-button>
        </span>
        <span style="padding-left: 20px">{{title()}}</span>
      </div>
      <div class="text item">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-tabs v-model="activeName" >
            <el-tab-pane :label="$t('common.basicInformation')" name="1">
              <el-form-item :label="$t('order.orderNumber')" prop="order_number">
                <el-input v-model="ruleForm.order_number" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('order.totalPaidAmount')+'￥'" prop="total_price">
                <el-input v-model="ruleForm.total_price" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('common.number')" prop="number">
                <el-input v-model="ruleForm.number" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('common.status')">
                <el-input v-model="ruleForm.status_text" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('order.orderTime')">
                <el-input v-model="ruleForm.create_time" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('order.paymentTime')">
                <el-input v-model="ruleForm.payment_time" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('common.completeTime')">
                <el-input v-model="ruleForm.complete_time" readonly></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane :label="$t('common.packageInformation')" name="2">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>{{ruleForm.package.title}}</span>
                  <span style="font-size: 20px">&nbsp;￥{{ruleForm.package.price}}</span>
                </div>
                <div style="padding: 5px">
                  <div style="text-align: center;padding: 5px;">
                    <el-row>
                      <el-col :span="4">{{$t('package-function.support')}}</el-col>
                      <el-col :span="16" style="text-align: left">{{$t('package-function.function')}}</el-col>
                      <el-col :span="4">{{$t('package-function.unit')}}</el-col>
                    </el-row>
                  </div>

                  <div v-for="function_item in ruleForm.package['package_functions']" style="padding: 5px;text-align: center">
                    <el-row>
                      <el-col :span="4">
                        <i class="el-icon-check" v-if="function_item.extend.package_package_function_status"></i>
                        <i class="el-icon-close" v-if="!function_item.extend.package_package_function_status"></i>
                      </el-col>
                      <el-col :span="16" style="text-align: left">{{function_item.title}}</el-col>
                      <el-col :span="4">{{function_item.extend.quantity}}{{function_item.extend.unit}}</el-col>
                    </el-row>
                  </div>
                </div>
<!--                <div v-if="ruleForm.valid_time"><el-tag type="success">过期时间：{{ruleForm.valid_time}}</el-tag></div>-->

              </el-card>
            </el-tab-pane>
          </el-tabs>

        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderInfo } from '@/api/order'
export default {
  name: 'OrderFrom',
  components: { },
  props: ['id'],
  data() {
    return {
      ruleForm: {
        package: {}
      },
      rules: {
      },
      activeName: '1'
    }
  },
  created() {
    this.onInfo()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    title() {
      return this.$t('order.edit')
    },
    onInfo() {
      if (!this.id) {
        return
      }
      getOrderInfo(this.id).then(res => {
        this.ruleForm = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
